<template>
  <v-row class="d-flex flex-column">
    <div :style="{height: `${listHeight}px`, overflow: 'auto'}" v-if="cardLoadding">
      <v-skeleton-loader
        v-for="(item, index) in [0, 1, 2]"
        :key="index"
        class="mb-4"
        style="width: 95%"
        type="card-avatar"
      />
    </div>
    <div :style="{height: `${listHeight}px`, overflow: 'auto'}" v-else>
      <v-card
        style="width: 95%"
        class="mb-4"
        @click="$router.push(`/article/detail/${item.articleId}`)"
        v-for="(item, index) in articleList"
        :key="index"
      >
        <!-- <v-img
        class="white--text align-end"
        height="150px"
        src="https://cdn.vuetifyjs.com/images/cards/docks.jpg"
      >
        <v-card-title class="accent--text">{{ item.title }}</v-card-title>
      </v-img> -->
        <v-card-title class="accent--text">{{ item.title }}</v-card-title>
        <v-card-text class="text--primary">
          <div>
            <span
              ><v-icon class="mr-1" small>mdi-clock-time-four</v-icon
              >{{ item.createTime.substring(0, 10) }}</span
            >
            <span class="ml-4"
              ><v-icon class="mr-1" small>mdi-atlassian</v-icon
              >{{ item.cateName }}</span
            >
            <span class="ml-4"
              ><v-icon class="mr-1" small>mdi-ansible</v-icon>
              <span v-for="(item, index) in item.tags" :key="index">{{
                item.tagName
              }}</span>
            </span>
          </div>
        </v-card-text>
      </v-card>
      <div
        v-if="total === 0"
        style="width: 100%; height: 450px"
        class="d-flex flex-column justify-center align-center mx-auto mb-4"
      >
        <v-img
          max-height="150"
          max-width="250"
          src="@/assets/original.png"
        ></v-img>
        <p class="subtitle-1 info--text">暂无数据</p>
      </div>
    </div>
    <div v-if="total !== 0" class="text-center">
        <v-pagination
          v-model="page"
          :total-visible="7"
          :length="Math.ceil(total / 12)"
        ></v-pagination>
      </div>
      
  </v-row>
</template>
<script>
import { articlePage } from "@/api/article/article";
export default {
  props: ["cateId", "tagId", "searchValue"],
  data() {
    return {
      articleList: [],
      page: 1,
      size: 12,
      total: 0,
      cardLoadding: false,
      snackbar: true,
      listHeight: document.documentElement.clientHeight - 180,
    };
  },
  created() {
    this.getArticleList();
  },
  mounted() {
    window.onresize = () => {
      this.listHeight = document.documentElement.clientHeight - 180
    };
  },
  methods: {
    handleSizeChange(val) {
      this.size = val;
      this.getArticleList();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getArticleList();
    },
    getArticleList() {
      this.cardLoadding = true;
      let data = {
        page: this.page,
        size: this.size,
        cateId: this.cateId !== 0 ? this.cateId : undefined,
        tagId: this.tagId !== 0 ? this.tagId : undefined,
        searchValue: this.searchValue !== "" ? this.searchValue : undefined,
      };
      articlePage(data).then((req) => {
        this.articleList = req.records;
        this.total = req.total;
        this.cardLoadding = false;
      });
    },
  },
  watch: {
    cateId: function () {
      this.page = 1
      this.getArticleList();
    },
    tagId: function () {
      this.page = 1
      this.getArticleList();
    },
    searchValue: function () {
      this.page = 1
      this.getArticleList();
    },
    page: function () {
      this.getArticleList();
    },
  },
};
</script>
<style lang="scss">
.list_index {
  padding: 5px;
}
.warp {
  background-color: white;
  border-radius: 5px;
  box-shadow: 0px 1px 5px 0px rgb(168, 168, 168);
  margin: 15px 0;
  .item {
    display: flex;
    flex-direction: column;
    padding: 10px 20px;
    div {
      padding: 10px 0;
    }
    .title {
      color: #409eff;
      font-size: 18px;
    }
    .info {
      color: #888888;
      font-size: 12px;
      span {
        padding-right: 20px;
      }
    }
  }
}
</style>
